<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useECharts } from '../hooks/useECharts';
import { GanttChart, EChartOption } from '../hooks/utilChart';

const props = defineProps({
   configData: {
      type: Object,
      default: () => ({
         type: 'gantt',
         width: 800,
         height: 600,
         data: {} as EChartOption,
      }),
   },
});

const publicEcharts = ref<HTMLDivElement | null>(null);
onMounted(() => {
   const { options, initChart } = useECharts(
      publicEcharts,
      new GanttChart(props.configData.data).getOptions()
   );
   initChart();
});
</script>

<template>
   <div>
      <div :style="`height: ${props.configData.height}px`" ref="publicEcharts">11111</div>
   </div>
</template>

<style lang="scss" scoped></style>
